<template>
  <div class="mod-config">
    <el-form ref="form" :inline="true" label-width="80px">
      <el-form-item>
        <el-select v-model="structureType" placeholder="请选择结构种类" clearable>
          <el-option v-for="item in structureTypeOptions" :key="item.value" :label="item.label" :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item width="400px">
        <el-input placeholder="输入名称搜索相关内容" v-model="condition" width="300" clearable></el-input>
      </el-form-item>

      <el-button type="primary" @click="openCharDialog()">添加精临例字</el-button>
      <el-button type="danger" v-show="showMoveBtn1" @click="multipledeleteHandle(1)">批量删除例字</el-button>
      <el-button type="danger" v-show="showMoveBtn2" @click="multipledeleteHandle(2)">批量删除单页</el-button>
      <el-button type="danger" v-show="showMoveBtn3" @click="multipledeleteHandle(3)">批量删除例字字</el-button>
    </el-form>

    <el-table :data="dataList" label-position="left" v-loading="dataListLoading" style="width: 100%;"
      @selection-change="handleSelectionChange(1,$event)" @expand-change="expandSelect" :row-key='getRowKeys'
      :expand-row-keys="expands">
      <el-table-column prop="" type="selection" />
      <el-table-column type="expand" padding="0" >
        <template slot-scope="props">
          <div style="width: 100%;">
          <el-table  :data="props.row.singlepageList" label-position="left" 
            @selection-change="handleSelectionChange(2,$event)" style="width: 100%">
            <el-table-column prop="" type="selection" />
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table label-position="left" :data="props.row.seCoExamCharacterList"  class="demo-table-expand"
                  @selection-change="handleSelectionChange(3,$event)" >
                  <el-table-column prop="" type="selection" />
                  <el-table-column label="字id" prop="id" width="180"></el-table-column>
                  <el-table-column label="原图" align="center">
                    <template slot-scope="scope">
                      <i v-show="isLoading1" class="el-icon-loading" style="font-size: 40px;"></i>
                      <el-image v-show="!isLoading1" :src="scope.row.selectedCopyingExcharacter1" @load="handleImgLoadZi(1)">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="单钩图" align="center">
                    <template slot-scope="scope">
                      <i v-show="isLoading2" class="el-icon-loading" style="font-size: 40px;"></i>
                      <el-image v-show="!isLoading2" :src="scope.row.selectedCopyingExcharacter2" @load="handleImgLoadZi(2)">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="双钩图" align="center">
                    <template slot-scope="scope">
                      <i v-show="isLoading3" class="el-icon-loading" style="font-size: 40px;"></i>
                      <el-image v-show="!isLoading3" :src="scope.row.selectedCopyingExcharacter3" @load="handleImgLoadZi(3)">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="描红图" align="center">
                    <template slot-scope="scope">
                      <i v-show="isLoading4" class="el-icon-loading" style="font-size: 40px;"></i>
                      <el-image v-show="!isLoading4" :src="scope.row.selectedCopyingExcharacter4" @load="handleImgLoadZi(4)">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="动态图" align="center">
                    <template slot-scope="scope">
                      <i v-show="isLoading5" class="el-icon-loading" style="font-size: 40px;"></i>
                      <el-image v-show="!isLoading5" :src="scope.row.selectedCopyingExcharacter5" @load="handleImgLoadZi(5)">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="顺序" prop="corder"></el-table-column>
                  <el-table-column header-align="center" align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="openCharZiDialog(scope.row)">修改字</el-button>
                      </el-button>
                      <el-button type="text" size="small" @click="deleteZiHandle(scope.row)">删除字</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column></el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="单页id" prop="id"></el-table-column>
            <el-table-column label="单页名称" prop="copyingExamplesSinglepageName"></el-table-column>
            <el-table-column label="单页封面" align="center" width="180">
              <template slot-scope="scope">
                <i v-show="isLoading6" class="el-icon-loading" style="font-size: 40px;"></i>
                <el-image v-show="!isLoading6" :src="scope.row.copyingExamplesSinglepage" @load="handleImgLoadZi(6)">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="顺序" prop="sorder"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="AddCharZi(scope.row)">添加例字</el-button>
                </el-button>
                <el-button type="text" size="small" @click="upatePage(scope.row)">修改单页</el-button>
                </el-button>
                <el-button type="text" size="small" @click="deletePageHandle(scope.row)">删除单页</el-button>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="例字id"></el-table-column>
      <el-table-column prop="copyingExamplesName" width="160" label="例字名称"></el-table-column>
      <el-table-column prop="copyingExamplesThumbnail" width="150" label="例字封面" align="center">
        <template slot-scope="scope">
          <i v-show="isLoading" class="el-icon-loading" style="font-size: 40px;"></i>
          <el-image v-show="!isLoading" :src="scope.row.copyingExamplesThumbnail" @load="handleImgLoad()">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="sorder" label="顺序" show-overflow-tooltip> </el-table-column>
      <el-table-column  header-align="center" align="center"label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="AddPage(scope.row)">添加单页</el-button>
          </el-button>
          <el-button type="text" size="small" @click="modifyChar(scope.row)">修改例字</el-button>
          </el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除例字</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 新增例字模态框 -->
    <el-dialog :title=isStatusName :visible.sync="dialogCharVisible" width="1000px" destroy-on-close
      v-loading="dialogLoading">
      <el-form :model="charDataForm" ref="CharForm" :rules="rules" @keyup.enter.native="dataFormSubmit()"
        label-width="100px">
        <el-form-item label="例字封面" prop="copyingExamplesSrc">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm"
              :on-success="handleAvatarSuccess" :on-remove="handleRemove" :limit=1 :before-upload="beforeAvatarUpload"
              :on-exceed="exceedPic">
              <img v-if="imageUrl" :src="charDataForm.copyingExamplesSrc" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
            </el-upload>
            <i v-if="imageUrl" class="el-icon-delete delIcon" @click.stop="delPic(0)" />
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="例字名称" prop="copyingExamplesName">
          <el-input v-model="charDataForm.copyingExamplesName"></el-input>
        </el-form-item>
        <el-form-item label="结构种类" prop="sid">
          <el-select v-model="charDataForm.sid" placeholder="请选择结构种类">
            <el-option v-for="item in structureTypeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顺序" prop="sorder">
          <el-input-number v-model="charDataForm.sorder" :min="1" :max="100" :precision="0" label="描述文字">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd()">取 消</el-button>
        <el-button type="primary" @click="doAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增例字字模态框 -->
    <el-dialog title="例字字管理" :visible.sync="dialogCharZiVisible" width="800px" destroy-on-close
      v-loading="dialogLoading">
      <el-form :model="charZiDataForm" ref="charZiDataForm" :rules="rules2" @keyup.enter.native="dataFormSubmit()"
        label-width="100px">
        <el-form-item label="精临例字字原图" prop="excharacter1" label-width="150px">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm1"
              :on-success="handleAvatarSuccessSome(1)" :on-remove="handleRemoveSome(1)" :limit=1
              :before-upload="beforeAvatarUpload" :on-exceed="exceedPic">
              <img v-if="imageUrl1" :src="charZiDataForm.excharacter1" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
              <i v-if="imageUrl1" class="el-icon-delete delIcon" @click.stop="delPic(1)" />
            </el-upload>
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="精临例字字单钩图" prop="excharacter2" label-width="150px">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm2"
              :on-success="handleAvatarSuccessSome(2)" :on-remove="handleRemoveSome(2)" :limit=1
              :before-upload="beforeAvatarUpload" :on-exceed="exceedPic">
              <img v-if="imageUrl2" :src="charZiDataForm.excharacter2" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
              <i v-if="imageUrl2" class="el-icon-delete delIcon" @click.stop="delPic(2)" />
            </el-upload>
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="精临例字字双钩图" prop="excharacter3" label-width="150px">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm3"
              :on-success="handleAvatarSuccessSome(3)" :on-remove="handleRemoveSome(3)" :limit=1
              :before-upload="beforeAvatarUpload" :on-exceed="exceedPic">
              <img v-if="imageUrl3" :src="charZiDataForm.excharacter3" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
              <i v-if="imageUrl3" class="el-icon-delete delIcon" @click.stop="delPic(3)" />
            </el-upload>
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="精临例字字描红图" prop="excharacter4" label-width="150px">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm4"
              :on-success="handleAvatarSuccessSome(4)" :on-remove="handleRemoveSome(4)" :limit=1
              :before-upload="beforeAvatarUpload" :on-exceed="exceedPic">
              <img v-if="imageUrl4" :src="charZiDataForm.excharacter4" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
              <i v-if="imageUrl4" class="el-icon-delete delIcon" @click.stop="delPic(4)" />
            </el-upload>
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="精临例字字动态图" prop="excharacter5" label-width="150px">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm5"
              :on-success="handleAvatarSuccessSome(5)" :on-remove="handleRemoveSome(5)" :limit=1
              :before-upload="beforeAvatarUpload" :on-exceed="exceedPic">
              <img v-if="imageUrl5" :src="charZiDataForm.excharacter5" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
              <i v-if="imageUrl5" class="el-icon-delete delIcon" @click.stop="delPic(5)" />
            </el-upload>
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="顺序" prop="corder" label-width="150px">
          <el-input-number v-model="charZiDataForm.corder" :min="1" :max="100" :precision="0" label="描述文字">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddZi()">取 消</el-button>
        <el-button type="primary" @click="doAddZi()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增单页模态框 -->
    <el-dialog :title=isStatusName :visible.sync="dialogPageVisible" width="1000px" destroy-on-close
      v-loading="dialogLoading">
      <el-form :model="pageDataForm" ref="pageForm" :rules="rules" @keyup.enter.native="dataFormSubmit()"
        label-width="120px">
        <el-form-item label="碑帖单页封面" prop="copyingExamplesSinglepage">
          <div class="motaikuang">
            <el-upload action="http://121.41.167.195:8000/api/oss/upload" :show-file-list="false" ref="uploadForm"
              :on-success="handlePageAvatarSuccess" :on-remove="handlePageRemove" :limit=1
              :before-upload="beforePageAvatarUpload" :on-exceed="exceedPic">
              <img v-if="imageUrl" :src="pageDataForm.copyingExamplesSinglepage" class="avatar"
                style="border: 1px dashed #d9d9d9;">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size: 70px;"></i>
            </el-upload>
            <i v-if="imageUrl" class="el-icon-delete delIcon" @click.stop="delPic()" />
          </div>
          <div>只能上传jpg/png文件，且不超过10MB</div>
        </el-form-item>
        <el-form-item label="碑帖单页名称" prop="copyingExamplesSinglepageName">
          <el-input v-model="pageDataForm.copyingExamplesSinglepageName"></el-input>
        </el-form-item>
        <el-form-item label="顺序" prop="sorder">
          <el-input-number v-model="pageDataForm.sorder" :min="1" :max="100" :precision="0" label="描述文字">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddPage()">取 消</el-button>
        <el-button type="primary" @click="doAddPage()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import draggable from "vuedraggable";
  export default {
    data() {
      return {
        tab: 1,
        dataList: null,
        isAdd: true,
        tag: 'years',

        condition: '',
        structureType: null,
        structureTypeOptions: [],

        dialogCharVisible: false,
        dialogLoading: false,
        dialogImageUrl: '',
        dialogVisible: false,
        imageUrl: null,
        charDataForm: {
          id: null,
          copyingExamplesSrc: null,
          copyingExamplesName: '',
          sid: null,
          sorder: 1
        },
        charZiDataForm: {
          excharacter1: null,
          excharacter2: null,
          excharacter3: null,
          excharacter4: null,
          excharacter5: null,
          sid: null,
          id: null,
          corder: 1
        },
        imageUrl1: null,
        imageUrl2: null,
        imageUrl3: null,
        imageUrl4: null,
        imageUrl5: null,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        isLoading: true,
        isLoading1: true,
        isLoading2: true,
        isLoading3: true,
        isLoading4: true,
        isLoading5: true,
        isLoading6: true,
        rules: {
          copyingExamplesSrc: [{
            required: true,
            message: '请上传例字封面',
            trigger: 'change'
          }],
          copyingExamplesName: [{
            required: true,
            message: '请输入例字名称',
            trigger: 'change'
          }],
          sid: [{
            required: true,
            message: '请输入例字种类',
            trigger: 'change'
          }],
          copyingExamplesSinglepageName: [{
            required: true,
            message: '请输入单页名称',
            trigger: 'change'
          }],
          copyingExamplesSinglepage: [{
            required: true,
            message: '请上传封面',
            trigger: 'change'
          }],
        },
        rules2: {
          excharacter1: [{
            required: true,
            message: '请上传原图',
            trigger: 'change'
          }],
          excharacter2: [{
            required: true,
            message: '请输入单钩图',
            trigger: 'change'
          }],
          excharacter3: [{
            required: true,
            message: '请输入双钩图',
            trigger: 'change'
          }],
          excharacter4: [{
            required: true,
            message: '请输入描红图',
            trigger: 'change'
          }],
          excharacter5: [{
            required: true,
            message: '请输入动态图',
            trigger: 'change'
          }],

        },
        dialogCharZiVisible: false,
        dialogPageVisible:false,
        expands: [], //只展开一行放入当前行id
        getRowKeys(row) { //设置row-key只展示一行
          return row.id
        },
        showMoveBtn1: false,
        showMoveBtn2: false,
        showMoveBtn3: false,
        pageDataForm: {
          copyingExamplesSinglepageName: '',
          copyingExamplesSinglepage: null,
          sid: null,
          sorder: 1
        },
      }
    },
    components: {
      draggable
    },
    created() {
      this.getexamplesType()
      this.getExamplesDataList()
    },
    watch: {
      structureType: {
        handler(newValue, OldValue) {
          this.pageIndex = 1
          this.getExamplesDataList()
        }
      },
      condition: {
        handler(newValue, OldValue) {
          this.pageIndex = 1
          this.getExamplesDataList()
        }
      },
      dialogCharVisible: {
        handler(newValue, OldValue) {
          this.charDataForm = {
            id: null,
            copyingExamplesSrc: null,
            copyingExamplesName: '',
            sid: null,
            sorder: 1
          }
          this.imageUrl = null
        }
      },
      dialogPageVisible: {
        handler(newValue, OldValue) {
          this.pageDataForm.copyingExamplesSinglepageName = ''
          this.pageDataForm.copyingExamplesSinglepage = null
          this.pageDataForm.sorder = 1
          this.imageUrl = null
        }
      },
    },
    computed: {
      isStatusName: function() {
        if (this.isAdd) {
          return '新增'
        } else {
          return '修改'
        }
      },
      dragOptions() {
        return {
          animation: 200,
          group: "description",
          disabled: false,
          ghostClass: "ghost"
        };
      }
    },
    methods: {
      // 精临例字分页列表
      getExamplesDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl("/sf/selectedCopyingExamples/examples/list"),
          method: "post",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: this.$http.adornData({
            condition: this.condition,
            structureType: this.structureType,
            curPage: this.pageIndex,
            pageSize: this.pageSize,
          }, true, 'form')
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.data.record;
            // this.dataList.forEach(item=>{
            //   item['children'] = item.seCoExamCharacterList
            // })
            this.totalPage = data.data.total;
          } else {
            this.$message.error(data.message);
            this.dataList = [];
            this.totalPage = 0;
            this.multipleSelection1 = []
            this.multipleSelection2 = []
            this.multipleSelection3 = []
          }
          this.dataListLoading = false;
        });
      },
      // 精临例字结构种类获取
      getexamplesType(type) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl("/sf/selectedCopyingExamples/examplesType/get"),
          method: "get",
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.structureTypeOptions = data.data.map((item) => {
              return {
                value: item.id,
                label: item.structureType
              }
            })
            // if (!this.structureType) this.structureType = this.structureTypeOptions[0]['label']

          } else {
            this.$message.error(data.message);
            this.structureTypeOptions = []
          }
          this.dataListLoading = false;
        });
      },
      // 新增 -- 打开例字框
      openCharDialog() {
        this.getexamplesType()
        this.dialogCharVisible = true
        this.isAdd = true
        this.charDataForm = {
          id: null,
          copyingExamplesSrc: null,
          copyingExamplesName: '',
          sid: null,
          sorder: 1
        }
      },
      // 上传碑帖封面
      handleAvatarSuccess(res, file) {
        this.dialogLoading = false
        this.imageUrl = res.url;
        this.charDataForm.copyingExamplesSrc = res.url;
      },

      beforeAvatarUpload(file) {
        this.dialogLoading = true
        const isJPG = file.type === 'image/jpeg' || 'png';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或PNG格式!');
          this.dialogLoading = false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
          this.dialogLoading = false
        }

        return isJPG && isLt2M;
      },
      // 删除图片
      handleRemove(file, fileList) {
        this.charDataForm.copyingExamplesSrc = null
        this.imageUrl = null
      },

      // 上传碑帖封面
      handleAvatarSuccessSome(num) {
        return (res, file, fileList) => {
          this.dialogLoading = false
          switch (num) {
            case 1:
              this.imageUrl1 = res.url;
              this.charZiDataForm.excharacter1 = res.url;
              break;
            case 2:
              this.imageUrl2 = res.url;
              this.charZiDataForm.excharacter2 = res.url;
              break;
            case 3:
              this.imageUrl3 = res.url;
              this.charZiDataForm.excharacter3 = res.url;
              break;
            case 4:
              this.imageUrl4 = res.url;
              this.charZiDataForm.excharacter4 = res.url;
              break;
            case 5:
              this.imageUrl5 = res.url;
              this.charZiDataForm.excharacter5 = res.url;
              break;
            default:
              break;
          }
        }


      },
      // 删除图片
      handleRemoveSome(num) {
        return (res, file, fileList) => {
          debugger
          this.dialogLoading = false
          switch (num) {
            case 1:
              this.imageUrl1 = null;
              this.charZiDataForm.excharacter1 = null;
              break;
            case 2:
              this.imageUrl2 = null;
              this.charZiDataForm.excharacter2 = null;
              break;
            case 3:
              this.imageUrl3 = null;
              this.charZiDataForm.excharacter3 = null;
              break;
            case 4:
              this.imageUrl4 = null;
              this.charZiDataForm.excharacter4 = null;
              break;
            case 5:
              this.imageUrl5 = null;
              this.charZiDataForm.excharacter5 = null;
              break;
            default:
              break;
          }
        }

      },

      // 上传超出数量
      exceedPic() {
        this.$message.error('只能上传一张封面')
      },
      // 年代书法框--取消按钮
      cancelAdd() {
        this.dialogCharVisible = false
      },
      // 碑帖模态框--提交确定按钮
      doAdd() {
        this.$refs['CharForm'].validate((valid) => {
          if (valid) {
            this.dialogLoading = true
            this.$http({
              url: this.$http.adornUrl(
                `/sf/selectedCopyingExamples/examples/${this.isAdd?"save":"update"}`),
              method: "post",
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: this.$http.adornData(this.charDataForm, true, 'form')
            }).then(({
              data
            }) => {
              this.dialogLoading = false
              if (data && data.code === 0 && data.success == true) {

                this.$message({
                  message: `${this.isAdd?'新增成功':'更新成功'}`,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.dialogCharVisible = false
                    this.getExamplesDataList()
                  },
                });
              } else {
                this.$message.error(data.message);
              }
            });
          } else {
            this.dataListLoading = false
            console.log('error submit!!')
            return false
          }
        })

      },
      // 修改--打开例字框
      modifyChar(row) {
        this.dialogCharVisible = true
        this.$nextTick(() => {
          this.isAdd = false
          this.imageUrl = row.copyingExamples;
          let sid = ''
          // 遍历下拉框的选项，寻找需要选中的选项
          for (let i = 0; i < this.structureTypeOptions.length; i++) {
            if (this.structureTypeOptions[i].value == row.sid) { // 假设需要选中的是“选项2”
              sid = this.structureTypeOptions[i].value; // 将选项2的value设置为v-model绑定的值
              break;
            }
          }
          this.charDataForm = {
            id: row.id,
            copyingExamplesSrc: row.copyingExamples,
            copyingExamplesName: row.copyingExamplesName,
            sid: sid,
            sorder: row.sorder
          }

        })
      },
      // 删除
      deleteHandle(row) {
        this.$confirm(`确定对id[${row.id}]进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.dataListLoading = true
            this.$http({
              url: this.$http.adornUrl("/sf/selectedCopyingExamples/examples/delete"),
              method: "post",
              data: this.$http.adornData([row.id], false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getExamplesDataList()
                  },
                });
              } else {
                this.dataListLoading = false
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      // 删除单页
      deletePageHandle(row) {
        this.$confirm(`确定对id[${row.id}]进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.dataListLoading = true
            this.$http({
              url: this.$http.adornUrl("/sf/selectedCopyingExamples/examplessinglepage/delete"),
              method: "post",
              data: this.$http.adornData([row.id], false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getExamplesDataList()
                  },
                });
              } else {
                this.dataListLoading = false
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      // 删除字
      deleteZiHandle(row) {
        this.$confirm(`确定对id[${row.id}]进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.dataListLoading = true
            this.$http({
              url: this.$http.adornUrl("/sf/selectedCopyingExamples/examplesChr/delete"),
              method: "post",
              data: this.$http.adornData([row.id], false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getExamplesDataList()
                  },
                });
              } else {
                this.dataListLoading = false
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      // --------------------这是例字字代码----------------------------
      // 打开例字字弹框
      AddCharZi(row) {
        this.isAddZi = true
        this.dialogCharZiVisible = true
        this.charZiDataForm = {
          excharacter1: null,
          excharacter2: null,
          excharacter3: null,
          excharacter4: null,
          excharacter5: null,
          sid: row.id,
          corder: 1
        }
        this.imageUrl1 = null
        this.imageUrl2 = null
        this.imageUrl3 = null
        this.imageUrl4 = null
        this.imageUrl5 = null
      },
      // 关闭例字字弹框
      cancelAddZi() {
        this.dialogCharZiVisible = false
      },
      // 修改-- 例字字框
      openCharZiDialog(row) {
        this.isAddZi = false
        this.dialogCharZiVisible = true
        this.$nextTick(() => {
          this.charZiDataForm = {
            excharacter1: row.selectedCopyingExcharacter1,
            excharacter2: row.selectedCopyingExcharacter2,
            excharacter3: row.selectedCopyingExcharacter3,
            excharacter4: row.selectedCopyingExcharacter4,
            excharacter5: row.selectedCopyingExcharacter5,
            id: row.id,
            corder: row.corder
          }
          this.imageUrl1 = row.selectedCopyingExcharacter1
          this.imageUrl2 = row.selectedCopyingExcharacter2
          this.imageUrl3 = row.selectedCopyingExcharacter3
          this.imageUrl4 = row.selectedCopyingExcharacter4
          this.imageUrl5 = row.selectedCopyingExcharacter5
        })

      },
      //例字字字模态框---提交确定按钮
      doAddZi() {
        this.$refs['charZiDataForm'].validate((valid) => {
          if (valid) {
            this.dialogLoading = true
            this.$http({
              url: this.$http.adornUrl(
                `/sf/selectedCopyingExamples/examplesChr/${this.isAddZi?"save":"update"}`),
              method: "post",
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: this.$http.adornData(this.charZiDataForm, true, 'form')
            }).then(({
              data
            }) => {
              this.dialogLoading = false
              if (data && data.code === 0 && data.success == true) {

                this.$message({
                  message: "更新成功",
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.dialogCharZiVisible = false
                    this.getExamplesDataList()
                  },
                });
              } else {
                this.$message.error(data.message);
              }
            })
          } else {
            this.dataListLoading = false
            console.log('error submit!!')
            return false
          }
        })
      },
      // 图片未渲染加载
      handleImgLoad() {
        this.isLoading = false
      },
      // 图片未渲染加载
      handleImgLoadZi(num) {
        switch (num) {
          case 1:
            this.isLoading1 = false
            break;
          case 2:
            this.isLoading2 = false
            break;
          case 3:
            this.isLoading3 = false
            break;
          case 4:
            this.isLoading4 = false
            break;
          case 5:
            this.isLoading5 = false
            break;
          case 6:
              this.isLoading6 = false
              break;
          default:
            break;
        }

      },

      // 展开行变化时触发
      expandSelect(row, expandedRows) {
        //加载前先将上次的数据模型情况，不然会出现点击展开嵌套表格后，先显示上一次的数据，然后渲染这次的数据。
        this.observe = [];
        //只展开一行
        if (expandedRows.length) { //说明展开了
          this.expands = [];
          if (row) {
            this.expands.push(row.id); //只展开当前行id
          }
        } else { //说明收起了
          this.expands = [];
        }
      },
      // 删除图片
      delPic(num) {
        switch (num) {
          case 0:
            this.imageUrl = null
                    this.$refs.uploadForm.clearFiles()
            this.charDataForm.copyingExamplesSrc = null
            break;
          case 1:
            this.imageUrl1 = null
                    this.$refs.uploadForm1.clearFiles()
            this.charZiDataForm.excharacter1 = null
            break;
          case 2:
            this.imageUrl2 = null
                    this.$refs.uploadForm2.clearFiles()
            this.charZiDataForm.excharacter2 = null
            break;
          case 3:
            this.imageUrl3 = null
                    this.$refs.uploadForm3.clearFiles()
            this.charZiDataForm.excharacter3 = null
            break;
          case 4:
            this.imageUrl4 = null
                    this.$refs.uploadForm4.clearFiles()
            this.charZiDataForm.excharacter4 = null
            break;
          case 5:
            this.imageUrl5 = null
                    this.$refs.uploadForm5.clearFiles()
            this.charZiDataForm.excharacter5 = null
            break;
          default:
            break;
        }

      },
      // --------------------这是分页公共代码----------------------------
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getExamplesDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getExamplesDataList()
      },
      // 点击多选框事件
      handleSelectionChange(type, val) {
        if (type==1) {
          this.multipleSelection1 = val
          this.showMoveBtn1 = this.multipleSelection1.length != 0
        } else if(type==2) {
          this.multipleSelection2 = val
          this.showMoveBtn2 = this.multipleSelection2.length != 0
        }else{
          this.multipleSelection3 = val
          this.showMoveBtn3 = this.multipleSelection3.length != 0
        }
      },
      // 批量删除
      multipledeleteHandle(type) {
        const ids = []
        let flag = ''
        if (type==1) {
          this.multipleSelection1.forEach(item => {
            ids.push(item.id)
          })
          flag = 'examples'
        } else if(type==2) {
          this.multipleSelection2.forEach(item => {
            ids.push(item.id)
          })
          flag = 'examplessinglepage'
        }else if(type==3) {
          this.multipleSelection3.forEach(item => {
            ids.push(item.id)
          })
          flag = 'examplesChr'
        }
        this.$confirm(`确定对这些进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl(`/sf/selectedCopyingExamples/${flag}/delete`),
              method: "post",
              data: this.$http.adornData(ids, false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0 && data.success) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getExamplesDataList()
                  },
                });
              } else {
                this.getExamplesDataList()
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      //单页模态框--提交确定按钮
      doAddPage() {
        this.$refs['pageForm'].validate((valid) => {
          if (valid) {
            this.dialogLoading = true
            this.$http({
              url: this.$http.adornUrl(
                `/sf/selectedCopyingExamples/examplessinglepage/${this.isAdd?"save":"update"}`),
              method: "post",
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: this.$http.adornData({
                ...this.pageDataForm,
                sid: this.pageDataForm.sid
              }, true, 'form')
            }).then(({
              data
            }) => {
              this.dialogLoading = false
              if (data && data.code === 0 && data.success == true) {

                this.$message({
                  message: `${this.isAdd?'新增成功':'更新成功'}`,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.dialogPageVisible = false
                    this.getExamplesDataList()
                  },
                });
              } else {
                this.$message.error(data.message);
              }
            });
          } else {
            this.dataListLoading = false
            console.log('error submit!!')
            return false
          }
        })
      },
      // 添加单页
      AddPage(row) {
        this.pageDataForm.sid = row.id
        this.dialogPageVisible = true
      },
      // 关闭碑帖单页弹框
      cancelAddPage() {
        this.dialogPageVisible = false
      },
      // ================上传碑帖单页封面================
      handlePageAvatarSuccess(res, file) {
        this.dialogLoading = false
        this.imageUrl = res.url;
        this.pageDataForm.copyingExamplesSinglepage = res.url;
      },
      beforePageAvatarUpload(file) {
        this.dialogLoading = true
        const isJPG = file.type === 'image/jpeg' || 'png';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或PNG格式!');
          this.dialogLoading = false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
          this.dialogLoading = false
        }

        return isJPG && isLt2M;
      },
      // 删除图片
      handlePageRemove(file, fileList) {
        this.pageDataForm.copyingExamplesSinglepage = null
        this.imageUrl = null
      },
     // 修改--打开单页框
      upatePage(row) {
        this.dialogPageVisible = true
        this.$nextTick(() => {
          this.isAdd = false
          this.imageUrl = row.copyingExamplesSinglepageName;
          this.pageDataForm = {
            ...row
          }
        })
      },
    },

  };
</script>
<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }


  .motaikuang {
    width: 150px;
    height: 150px;
    position: relative;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
  }

  .delIcon {
    position: absolute;
    right: -50px;
    bottom: 0px;
    font-size: 40px;
    cursor: pointer;
  }

  .uploadIcon {
    margin-left: 40px;
  }

  // .motaikuang .el-form-item__content{
  //   padding-left: 30px !important;
  // }
</style>
